<template>
  <view class="card" :class="cardClass" @click="handleClick">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'Card',
  props: {
    // 是否有阴影
    shadow: {
      type: Boolean,
      default: true
    },
    // 是否有边框
    border: {
      type: Boolean,
      default: false
    },
    // 点击效果
    clickable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    cardClass() {
      return {
        'card-shadow': this.shadow,
        'card-border': this.border,
        'card-clickable': this.clickable
      };
    }
  },
  methods: {
    handleClick(event) {
      if (this.clickable) {
        this.$emit('click', event);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  background-color: $card-background;
  border-radius: $border-radius-base;
  padding: $spacing-base;
  margin-bottom: $spacing-base;
}

.card-shadow {
  box-shadow: $box-shadow;
}

.card-border {
  border: 1rpx solid $text-tertiary;
}

.card-clickable {
  &:active {
    opacity: 0.8;
  }
}
</style>